<!DOCTYPE html>
<html lang="zh-CN"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      layout:decorator="model/boardModel">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <script th:src="@{/plugins/My97DatePicker/WdatePicker.js}"></script>
    <script th:src="@{/plugins/area/ProJson.js}"></script>
    <title>问题列表</title>

</head>
<body>

<div th:fragment="pagenav" th:remove="tag">
    <div th:replace="model/nav :: pageheader ('问题管理','问题管理')"></div>
</div>

<div th:fragment="content" th:remove="tag">


    <div class="row">
        <div class="col-xs-12">

            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">查询条件</h3>
                    <div class="box-tools pull-right">
                        <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                    </div>
                </div>
                <!-- /.box-header -->
                <!-- form start -->
                <form role="form" id="queryForm" class="form-horizontal" th:action="@{/express/list}" method="post" >
                    <div class="box-body">
                        <div class="row">
                            <div class="col-xs-3">
                                <input type="text" th:name="orderNo"  class="form-control input-sm" placeholder="订单号"/>
                            </div>
                            <div class="col-xs-3">
                                <select name="problemType" style="width: 160px;height: 34px;float:left" class="form-control select2" >
                                    <option value="" >问题类型</option>
                                    <option value="1">订单问题</option>
                                    <option value="2">非订单问题</option>
                                </select>
                            </div>
                            <div class="col-xs-3">
                                <select id="selProvince1" style="width: 140px;height: 34px;float:left" class="form-control select2" >
                                    <option value="0">--省份--</option>
                                </select>
                                <input type="hidden" id="provinceName1" name="provinceName"/>
                            </div>
                            <shiro:hasRole name="sys_agency">
                                <input type="hidden" th:name="agencyId" th:value="${session.authUser.userId}"/>
                            </shiro:hasRole>
                            <div class="col-xs-3">
                                <button id="btn-query" type="button"  class="btn btn-primary  btn-sm">查询</button>
                            </div>
                        </div>

                    </div>
                    <!-- /.box-body -->

                    <div class="box-footer">

                    </div>
                </form>
            </div>
            <form role="form" id="submitForm" class="form-horizontal"  method="post" >
                <div class="box-body" id="orderforSubmit">

                </div>
            </form>

            <div class="box">

                <!-- /.box-header -->
                <div class="box-body">
                    <div class="table-responsive">
                    <table id="dataTable" class="table table-striped table-bordered table-hover table-condensed">

                        <thead >
                        <tr>
                            <th>省份</th>
                            <th>订单编号</th>
                            <th>标题</th>
                            <th>说明</th>
                            <th>问题类型</th>
                            <th>状态</th>
                            <th>创建时间</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                    </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">

                <div class="modal-header" style="background-color: #307095;">
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">&times;</span><span class="sr-only">关闭</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel2">问题新增</h4>
                </div>

                <div class="modal-body">
                    <form class="form-horizontal"  id="editForm" action="/esti/edit" method="post">
                        <input type="hidden" name="status" value="0"/>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">省份</label>
                            <div class="col-sm-9">
                                <select id="selProvince" style="width: 120px;height: 34px;float:left" data-rule-required="true" data-msg-required="请选择地区" class="form-control select2" >
                                    <option value="0">--省份--</option>
                                </select>
                                <input type="hidden" name="provinceName" id="provinceName"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">问题类型</label>
                            <div class="col-sm-9">
                                <select name="problemType" class="form-control" id="problemCheck">
                                    <option value="0" disabled="disabled">请选择</option>
                                    <option value="1" >订单问题</option>
                                    <option value="2" >非订单问题</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group" id="orderCheck">

                        </div>
                        <div class="form-group" id="orderlist">

                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">标题</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" name="problemTittle"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">问题描述</label>
                            <div class="col-sm-9">
                                <textarea class='form-control' name="problemText" placeholder='请输入问题描述...'></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">图片</label>
                            <div class="col-sm-9">
                                <img id="showImage" th:src="@{/dist/img/pictures.png}" style="float:left;" width="80" height="110" />
                            </div>
                            <div class="col-sm-9">
                                <input type="hidden" name="imageUrl" id="imageUrl" value=""/>
                                <a id="selectImage" class="btn btn-primary" style="height: 21px;font-size: 12px;text-align: center;padding-top: 2px;position:absolute;left: 166px;top:-10px;" href="javascript:;">点击上传</a>
                            </div>
                        </div>

                    </form>
                </div>
                <!-- modal-body END -->

                <div class="modal-footer">
                    <button type="submit" id="btn-submit" class="btn btn-primary">提交</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="detailModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">

                <div class="modal-header" style="background-color: #307095;">
                    <h4 class="modal-title" id="myModalLabel3">订单信息</h4>
                </div>
                <div class="modal-body">

                </div>
                <div class="modal-header" >
                    <h4 class="modal-title" id="myModalLabel4">问题信息</h4>
                </div>
                <div class="modal-header" style="background-color: #307095;">
                    <h4 class="modal-title" id="myModalLabel5">问题描述</h4>
                </div>
                <div class="modal-header" style="background-color: #307095;">
                    <h4 class="modal-title" id="myModalLabel7">处理结果</h4>
                </div>
                <!-- modal-body END -->

                <div class="modal-footer">
                    <button type="submit" id="btn-ensure" class="btn btn-primary">提交</button>
                </div>
            </div>
        </div>

    </div>
    <!-- DataTables -->
    <script th:src="@{/plugins/jQuery/plupload.full.min.js}"></script>
    <script type="text/javascript">

        $(function (){
            var tables = $("#dataTable").dataTable({
                serverSide: true,//分页，取数据等等的都放到服务端去
                processing: true,//载入数据的时候是否显示“载入中”
                pageLength: 10,  //首次加载的数据条数
                ordering: false,//排序操作在服务端进行，所以可以关了。
                /*pagingType: "full_numbers",*/
                autoWidth: false,
                stateSave: true,//保持翻页状态，和tables.fnDraw(false);结合使用
                searching: false,
                ajax: {   //类似jquery的ajax参数，基本都可以用。
                    type: "post",//后台指定了方式，默认get，外加datatable默认构造的参数很长，有可能超过get的最大长度。
                    url: "/problem/list",
                    dataSrc: "data",//默认data，也可以写其他的，格式化table的时候取里面的数据
                    data: function (d) {//d是原始的发送给服务器的数据，默认很长。
                        var param = {}; //因为服务端排序，可以新建一个参数对象
                        param.draw = d.draw;
                        param.start = d.start;
                        param.length = d.length;
                        var formData = $("#queryForm").serializeArray();//把form里面的数据序列化成数组
                        formData.forEach(function (e) {
                            param[e.name] = e.value;
                        });
                        return param;//自定义需要传递的参数。
                    }
                },
                columns: [//对应上面thead里面的序列
                    {"data": 'provinceName',defaultContent: ""},
                    {"data": 'orderNo',defaultContent: ""},
                    {"data": 'problemTittle',defaultContent: ""},
                    {"data": 'problemText',defaultContent: ""}, //mData 表示发请求时候本列的列明，返回的数据中相同下标名字的数据会填充到这一列
                    {"data": 'problemType', defaultContent: "",
                        "render": function (data, type, full, callback) {
                            if(data==1)
                                return  "订单问题";
                            else if(data==2)
                                return "非订单问题";
                        }
                    },
                    {"data": 'status', defaultContent: "",
                        "render": function (data, type, full, callback) {
                            if(data==0)
                                return  /*<![CDATA[*/"<span class='label label-danger'>待处理</span>"/*]]>*/;
                            else if(data==1)
                                return  /*<![CDATA[*/"<span class='label label-danger'>处理中</span>"/*]]>*/;
                            else if(data==2)
                                return /*<![CDATA[*/"<span class='label label-success'>处理完成（退货）</span>"/*]]>*/;
                            else if(data==3)
                                return /*<![CDATA[*/"<span class='label label-success'>处理完成（解决）</span>"/*]]>*/;
                        }
                    },
                    {"data": 'createTimeStr', defaultContent: ""},
                    {"data": null, "width": "150px"}

                ],

                /*<![CDATA[*/
                 columnDefs: [
                     {
                     targets: -1,//编辑
                     data: null,//下面这行，添加了编辑按钮和，删除按钮
                     defaultContent: "<div class='btn-group'><button id='editRow' class='btn btn-primary btn-sm' type='button'><i class='fa fa-edit'></i>明细操作</button></div>"
                     }
                 ],
                dom: '<"toolbar">frtip',
                /*]]>*/

                //每加载完一行的回调函数
                createdRow: function( row, data, index ) {
                    //修改单元格样式
                    //$('td', row).eq(5).css('font-weight',"bold").css("color","red");//获取到具体行具体格的元素
                },
                initComplete: function (setting, json) {
                    //初始化完成之后替换原先的搜索框。
                },
                //在每次table被draw完后调用
                /*fnDrawCallback: function(){
                 var api = this.api();
                 //获取到本页开始的条数
                 var startIndex= api.context[0]._iDisplayStart;
                 api.column(0).nodes().each(function(cell, i) {
                 cell.innerHTML = startIndex + i + 1;
                 });
                 },*/


                language: {
                    lengthMenu: "",//不显示记录条数选择
                    //lengthMenu: '<select class="form-control input-xsmall">' + '<option value="5">5</option>' + '<option value="10">10</option>' + '<option value="20">20</option>' + '<option value="30">30</option>' + '<option value="40">40</option>' + '<option value="50">50</option>' + '</select>条记录',//左上角的分页大小显示。
                    processing: "加载中",//处理页面数据的时候的显示
                    /*<![CDATA[*/
                    paginate: {//分页的样式文本内容。
                        previous: "<",
                        next: ">",
                        first: "<<",
                        last: ">>"
                    },
                    /*]]>*/
                    zeroRecords: "没有数据",//table tbody内容为空时，tbody的内容。
                    //下面三者构成了总体的左下角的内容。
                    //info: "共 _PAGES_ 页，显示第 _START_ 到第 _END_ 条 ",//筛选之后得到 _TOTAL_ 条，初始 _MAX_ 条   左下角的信息显示，大写的词为关键字。
                    info: "共 _PAGES_ 页，显示第 _START_ 到第 _END_ 条",
                    infoEmpty: "0条记录",//筛选为空时左下角的显示。0条记录
                    infoFiltered: "",//筛选之后的左下角筛选提示(另一个是分页信息显示，在上面的info中已经设置，所以可以不显示)，
                    sSearch: "关键字："
                }

            });
            <shiro:hasAnyRoles name="admin,esti_expr_qc,express_qc">
                $("div.toolbar").html('<button type="button" class="btn btn-primary btn-sm" id="btn-add">新增</button>');
            </shiro:hasAnyRoles>
            $("#btn-add").on("click", function () {
                $("#editModal select[name=problemType]").val(0);
                $("#editModal input[name=problemTittle]").val('');
                $("#editModal textarea[name=problemText]").val('');
                $("#selProvince").val(0);
                $("#showImage").attr("src","/dist/img/pictures.png");
                $("#editModal").modal("show");
            })
            $("#problemCheck").change(function () {
                $("#orderCheck label").remove();
                $("#orderCheck div").remove();
                $("#orderCheck input").remove();
                if($("#problemCheck").val()==1){
                    /*<![CDATA[*/
                    $("#orderCheck").append("<label class='col-sm-3 control-label'>订单号</label><div class='col-sm-7'>" +
                        "<input type='text' class='form-control' id='orderNo' name='orderNo'/></div><input type='button' onclick='searchOrder()' class='btn btn-primary btn-sm' value='查询' />")
                    /*]]>*/

                }
            })
            $("#btn-submit").on("click", function(){
                $("#btn-submit").attr("disabled",true);
                if($("#selProvince").find("option:selected").val()!=0){
                    $("#provinceName").val($("#selProvince").find("option:selected").text());
                }else{
                    $("#provinceName").val(null)
                }
                if($("#problemCheck").val()==2){
                    $.ajax({
                        url: '/problem/add',
                        type: 'POST',
                        data: $("#editForm").serialize(),
                        dataType: "json",
                        cache: "false",
                        success: function (result) {
                            if (result.result == 200) {
                                toastr.success(result.msg);
                                $("#btn-submit").attr("disabled",false);
                                $("#editModal").modal("hide");
                                tables.fnDraw();
                            } else {
                                $("#btn-submit").attr("disabled",false);
                                toastr.error(result.msg);
                            }
                        },
                        error: function (err) {
                            $("#btn-submit").attr("disabled",false);
                            toastr.error("网络错误...");
                        }
                    });
                }else{
                    if($("#orderForView input[type=checkbox]:checked").length !=1){
                        alert("请选择一条订单记录");
                        $("#btn-submit").attr("disabled",false);
                        return
                    }else{
                        var orderNo = $("#orderForView input[type=checkbox]:checked").attr("id")
                        $("#orderNo").val(orderNo);
                        $.ajax({
                            url: '/problem/add',
                            type: 'POST',
                            data: $("#editForm").serialize(),
                            dataType: "json",
                            cache: "false",
                            success: function (result) {
                                if (result.result == 200) {
                                    toastr.success(result.msg);
                                    $("#editModal").modal("hide");
                                    $("#btn-submit").attr("disabled",false);
                                    tables.fnDraw();
                                } else {
                                    $("#btn-submit").attr("disabled",false);
                                    toastr.error(result.msg);
                                }
                            },
                            error: function (err) {
                                $("#btn-submit").attr("disabled",false);
                                toastr.error("网络错误...");
                            }
                        });
                    }
                }
            })
            //查询按钮
            $("#btn-query").on("click", function () {
                $("#provinceName1").val("")
                if($("#selProvince1").val()!=0){
                    $("#provinceName1").val($("#selProvince1").find("option:selected").text());
                }
                tables.fnDraw();
            });

            $("#dataTable tbody").on("click", "#editRow", function () {
                var data = tables.api().row($(this).parents("tr")).data();
                if(data.problemType ==1){
                    location.href="/problem/o/"+data.problemId;
                }
                if(data.problemType == 2){
                    location.href="/problem/p/"+data.problemId;
                }

            })
            /*<![CDATA[*/
            $.each(province, function (k, p) {
                var option = "<option value='" + p.ProID + "'>" + p.ProName + "</option>";
                $("#selProvince").append(option);
                $("#selProvince1").append(option);
            });
            /*]]>*/
        })
        var uploader = new plupload.Uploader({
            runtimes : 'html5,flash,silverlight',//设置运行环境，会按设置的顺序，
            url : '/sysUpload/uploadImg',
            max_file_size : '10M',
            browse_button : 'selectImage',
            filters : [ {
                title : 'Image files',
                extensions : 'jpg,gif,png'
            }],
            init : {
                FilesAdded: function(up, files) {
                    uploader.start();
                    return false;
                },
                FileUploaded : function(up, file, info) {//文件上传完毕触发
                    console.log("单独文件上传完毕");
                    var response = $.parseJSON(info.response);
                    if(response.result==200){
                        alert(response.msg);
                        $("#imageUrl").val(response.data);
                        $("#showImage").attr("src",response.data);
                    }else{
                        alert(response.msg);
                    }
                }
            }
        });
        uploader.init();
        function searchOrder() {
            $("#orderlist").empty();
            if($("#orderNo").val()){
                $.ajax({
                    url: '/problem/getOrders',
                    type: 'POST',
                    data: {"orderNo": $("#orderNo").val()},
                    dataType: "json",
                    cache: "false",
                    success: function (result) {
                        if (result.result == 200) {
                            /*<![CDATA[*/
                            $("#orderlist").append("<label class='col-sm-3 control-label'>选择订单</label> <div class='col-sm-9' >" +
                                "<table id='orderForView' class='table table-striped table-bordered table-hover table-condensed'><tr>" +
                                "<th>选择</th><th>订单号</th><th>物品名称</th></tr></table></div>")
                            $.each(result.data,function(i,n){
                                $("#orderForView").append("<tr><td><input type='checkbox' id='"+n.orderNo+"'/></td><td>"+n.orderNo+"</td><td>"+n.goodsName+"</td></tr>");
                            });
                            /*]]>*/
                        } else {
                            toastr.error(result.msg);
                        }
                    },
                    error: function (err) {
                        toastr.error("网络错误...");
                    }
                });
            }else{
                alert("请输入订单号！")
            }
        }
    </script>


</div>
</body>
</html>
